import React ,{useEffect, useState}from 'react'
import { Table,Tag,Button,Modal,Popover, Switch} from 'antd';
import axios from 'axios';
import { DeleteOutlined,EditOutlined,ExclamationCircleOutlined} from '@ant-design/icons';
const { confirm } = Modal;
export default function RightList() {
  const [dataSource,setdataSource] = useState([])
  useEffect(()=>{
    axios.get('http://localhost:8000/rights?_embed=children').then(res=>{
      const list = res.data
      list.map(item=>{
        if(item.children.length<=0){
          item.children=''
        }
      })
      setdataSource(list)
    })
  },[])


  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render:(id)=>{
        return <b>{id}</b>
      }
    },
    {
      title:'权限名称',
      dataIndex:'label'
    },
    {
      title:'权限路径',
      dataIndex:'key',
      render:(key)=>{
        return<Tag color='orange'>{key}</Tag>
      }
    },
    {
      title:'操作',
      render:(item)=>{
        return <div>
          <Button type="danger" shape="circle" icon={ <DeleteOutlined />}  onClick={()=>showDeleteConfirm(item)}/>
          <Popover content={
            <div style={{textAlign:'center'}}><Switch checked={item.pagepermisson} onChange={()=>switchMethod(item)}></Switch></div>
          } title="页面配置项" trigger={item.pagepermisson===undefined?'':'click'} >
          <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={item.pagepermisson===undefined}/>
          </Popover>
        </div>
      }
    }
  ];


  //修改权限开关
  const switchMethod=(item)=>{
    console.log(item);
    item.pagepermisson = item.pagepermisson===1?0:1
    setdataSource([...dataSource])
    if(item.grade===1){
      axios.patch(`http://localhost:8000/rights/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }else{
      axios.patch(`http://localhost:8000/children/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }
  }




  const showDeleteConfirm = (item) => {
    confirm({
      title: '你确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      // content: 'Some descriptions',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        // console.log('OK');
        deleteMethod(item)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };
  const deleteMethod = (item)=>{
    console.log(item);
    // 当前页面同步状态 + 后端同步


    //判断层级 
    if(item.grade===1){
      setdataSource(dataSource.filter(data=>data.id!==item.id))
      axios.delete(`http://localhost:8000/rights/${item.id}`)
    }else{
      let list = dataSource.filter(data=>data.id===item.rightId)
      
      list[0].children = list[0].children.filter(data=>data.id!==item.id)
      console.log(list,dataSource);
      setdataSource([...dataSource])
      axios.delete(`http://localhost:8000/children/${item.id}`)
    }


  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{
        pageSize:5
      }} />;
    </div>
  )
}
